<template>
  <!-- 外围最大的盒子 -->
  <div class="record">
    <!-- 导航栏 -->
    <!-- 左侧列表栏 -->
    <div class="box">
      <div class="myList">
        <van-list class="one">
          <van-cell
            title="库位列表"
            style="background-color: #1a1c25; color: #ffffff"
          />
          <van-cell
            @click="oneexamine(item)"
            v-for="(item, index) in robot"
            :class="[
              'tr-color-1' + (index % 2),
              { active: oneactiveIndex === item },
            ]"
            :title="'点号' + item.id"
            :key="index"
            ><van-icon
              name="close"
              size="28"
              color="#fff"
              @click="remove(item.id)"
          /></van-cell>
        </van-list>
        <van-cell
          id="new"
          title="+"
          style="background-color: #1a1c25; color: #26d473"
          @click="record"
        ></van-cell>
        <!-- 列列表标签栏 -->
        <!-- <van-list class="two">
          <van-cell
            title="列列表"
            style="background-color: #1a1c25; color: #ffffff"
          />
          <van-cell
            @click="twoexamine(item)"
            v-for="(item, index) in parse"
            :class="[
              'tr-color-1' + (index % 2),
              { active: twoactiveIndex === item },
            ]"
            :title="'列号' + item.point_list_id"
            :key="index"
            ><van-icon name="close" size="28" color="#fff" @click="detele(item)"
          /></van-cell>
        </van-list>
        <van-cell
          id="new"
          title="+"
          style="background-color: #1a1c25; color: #26d473"
          @click="add"
        ></van-cell> -->
      </div>
      <!-- 右侧内容区域 -->
      <div class="myconent">
        <!-- 传入显示与隐藏和点击的列表数据到子组件 -->
        <conent
        ref="chirl"
          @gain="gain"
          :isShow="isShow"
          :list="newList"
          :robot="robot"
          :parse="parse"
          @getparse="getparse"
          @activesdianwei="activesdianweis"
          @onlist="onlist"
          :formShow="formShow"
          @hideShow="hideShow"
          @overShow="overShow"
          :xshow="xshow"
          :yshow="yshow"
          @newxShow="newxShow"
          @newyShow="newyShow"
          :radio='radio'
          @changRadio='changRadio'
        ></conent>
        <!-- 库位列表组件 -->
      </div>
    </div>
    <div class="zhouimg">
      <img src="../../assets/zhou3.png" alt="">
    </div>
    <!--键盘区域 -->
    <div class="keyboard-mask" v-if="xshow">
      <keyboard @onChange="Change" @onKeyPress="onKeyPress" />
    </div>
    <div class="keyboard-mask" v-if="yshow">
      <keyboard @onChange="onChange" @onKeyPress="onKeyPress" />
    </div>
  </div>
</template>
<script>
//导入提示框组件
import { Dialog } from "vant";
//导入yaml格式进行获取数据转换
import yaml from "js-yaml";
// 导入右侧组件进行注册
import conent from "./components/conent.vue";
//导入封装获取库位列表的接口
import { gainApi, recordApi, removeApi } from "@/api/record";
//导入获取列列表的数据接口
import { parseApi, addparseApi } from "@/api/location";
export default {
  // 进行组件注册
  components: {
    conent, //库位列表组件
  },
  data() {
    return {
      newradio:'',
      radio:'',
      xshow: false, //x轴键盘的显示和隐藏
      yshow: false, //y轴键盘的显示和隐藏
      formShow: false, //控制记录库位表单的显示和隐藏
      newShow: false,
      columnList: [], //用来保存列列表数据的数组
      oneactiveIndex: "", //库位列表高亮的类名
      twoactiveIndex: "", //列列表高亮的类名
      isShow: true, //默认状态为true
      newList: [], //点击保存那一项数据的数组
      // 机器人的信息
      robot: [], //用来保存坐标数据的信息
      parse: [], //列列表数据
      inif: {
        x: "",
        y: "",
      },
    };
  },
  // 注册方法
  methods: {


    //自定义事件修改父组件中的值
    changRadio(val){
       this.radio=val
      console.log(this.radio,'修改父组件中的值');
    },

    //-----------------------------------------------------键盘区域事件
    //  速度的输入
    Change(input) {
      // input 是当前点击按钮的值
      // this.inif.speed = input; //把点击的那一项的值赋值给输入框
      this.newList.x = input;
    },
    activesdianweis(val) {
      //this.newList = val;
      this.oneexamine(val)
    },
    onChange(input) {
      this.newList.y = input;
    },
    //键盘的删除和确定事件
    onKeyPress(button) {
      if (button == "{enter}") {
        // 如果按确认键的相应操作
        this.yshow = false;
        this.xshow = false;
      }
      if (button == "{bksp}") {
        // 删除键的相应操作
      }
    },
    //-----------------------------------------------------键盘区域事件
    //添加列的方法事件
    async add() {
      //新建列列表请求
      let res = await addparseApi();
    },
    //删除列列表的方法
    detele(item) {
      // 弹出确认框
      Dialog.confirm({
        title: "删除列列表",
        message: `你确定要删除ID为${item}的列表嘛?`,
      })
        //点击确定执行
        .then(async () => {
          try {
            //发送请求
            let res = await deteleparseApi({
              point_list_id: id, //传入删除的id
            });
            // 提示用户
            this.$toast.success("删除成功");
            //调用获取列列表数据的方法刷新页面
            this.getparse();
          } catch {
            //提示用户出错
            this.$toast.fail("删除失败");
          }
        }) // 点击取消
        .catch(() => {
          // 提示用户
          this.$toast.fail("取消成功!");
        });
    },
    //-----------------------------------------------------获取车辆数据的方法
    gainmap() {
        let ws = new WebSocket("ws://" + window.location.hostname + ":10009"); //获取本地服务器上的端口号
       //      let ws = new WebSocket("ws://192.168.20.101:10009");
      ws.onmessage = (e) => {
        //使用箭头函数改变this的指向
        //当服务器有消息，就会自动调用这个函数
        //e.data有服务器返回的数据
        const res = yaml.load(e.data); //使用yaml格式进行转换
        if (res.uri == "/sirius/topics/slam_grid_map") {
          //判断res中的uri路劲是不是等于有图片的路径
          this.myimage = res.data; //如果等于就把里面中有的data进行base格式进行拼接
          this.width = res.info.width; //保存宽度
          this.height = res.info.height; //保存高度
          this.newx = res.info.origin.position.x;
          this.newy = res.info.origin.position.y;
        } else if (res.uri == "/sirius/topics/robot_status_localizer_result") {
          this.inif.x = res.fused_x; //保存获取到的x轴坐标
          this.inif.y = res.fused_y; //保存获取到的y轴坐标
          this.inif.fused_angle = res.fused_angle;
        }
      };
    },

    //x轴输入框获得焦点事件
    newxShow(val) {
      this.xshow = val;
      this.yshow = false;
    },
    //y轴输入框获得焦点事件
    newyShow(val) {
      this.yshow = val;
      this.xshow = false;
    },

    // 点击编辑页面修改父组件中的值状态
    overShow(val) {
      this.formShow = val;
    },

    hideShow(val) {
      this.formShow = val;
    },
    //-------------------------------------记录库位按钮事件
    async record() {
      //发送新增库位列表请求
      try {
        let res = await recordApi({
          //传入x轴坐标
          x: this.inif.x,
          // x:55,
          //传入y轴坐标
          y: this.inif.y,
          angle: this.inif.fused_angle,
          // y:5888
        });
        //调用获取库位信息的方法刷新页面
        this.gain();
        //提示用户新建成功
        this.$toast.success("新建成功");
      } catch {
        this.$toast.fail("新建失败");
      }
    },
    //---------------------------------------删除库位的方法
    async remove(id) {
      Dialog.confirm({
        title: "删除",
        message: `您确定要删除名称为${id}的库位吗？`,
      })
        // 点击确认发送请求
        .then(async () => {
          try {
            //发送删除库位的接口请求
            let res = await removeApi({
              id: id,
            });
            // 提示用户
            this.$toast.success("删除成功");
            //调用获取库位列表的数据方法刷新页面
            this.gain();
            this.newList = "";
          } catch {
            this.$toast.fail("删除失败");
          }
        })
        // 点击取消触发
        .catch(() => {
          // 提示用户
          this.$toast.fail("取消成功");
        });
    },
    //库位列表的点击事件
    async oneexamine(item) {
      //传入一个id用来判断选中的那一项
      this.oneactiveIndex = item; //在把传过来的id赋值给定义好的变量
      this.newList = item; //保存点击的那一项到新的数组中
      this.isShow = true; //点击库位列表后把isShow改为true
      this.twoactiveIndex = ""; //把默认选项类赋值为空
      this.radio=item.type   //把每一项的点位状态赋值给一个变量
      console.log(this.newList, "点击的那一项");
      this.$refs.chirl.newproperty=true
      this.$refs.chirl.activeItem=''
    },

    // //列列表的点击事件
    // async twoexamine(item) {
    //   //传入一个id用来判断选中的那一项
    //   this.twoactiveIndex = item; //在把传过来的id赋值给定义好的变量
    //   this.newList = item; //保存点击的那一项到新的数组中
    //   this.isShow = false; //点击列列表后把isShow改为false，改为false是因为子组件取反了
    // },

    //获取库位列表的方法
    async gain() {
      //发送请求
      let res = await gainApi();
      let newres = yaml.load(res.data);
      console.log(newres, "测试数据");
      if (res.data.msg !== "successed" && newres !== undefined) {
        //转换成对象键值对形式
        // 定义一个数组用来解构
        let one = [];
        //将转换好的对象追加到robot数组中
        one.push(newres);
        // 把最外层的数组给解构出来
        let flattened = [].concat.apply([], one);
        //赋值给robot数组
        this.robot = flattened;
        console.log(this.robot);
      }else if(newres == undefined){
        this.robot = [];
      }
    },
    //获取列列表数据方法
    async getparse() {
      //发送请求获取数据
      let res = await parseApi();
      //转换成yaml格式的数据
      let newparse = yaml.load(res.data);
      this.parse = newparse; //赋值给定义好的变量
    },

    //子组件中的方法
    onlist(val) {
      // 传入参数把删除的那一项数据清除
      this.newList = val;
    },
  },

  //created钩子函数
  created() {
    this.gain(); //打开页面就获取库位列表信息
    this.getparse(); //进入页面发送获取列列表数据
    this.gainmap(); //获取地图坐标信息方法
  },
};
</script>

<style lang="less" scoped>
.record {
  position: fixed;
  top: 70px;
  width: 100%;
  height: 100vh;
  background-color: #12151a;
  .box {
    height: 100vh;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    .myimg {
      flex: 1;
    }
  }
}
.van-cell {
  color: #fff;
  font-size: 16px;
  background-color: #1a1c25;
  margin-left: 10px;
  margin-top: 3px;
  width: 180px !important;
  height: 50px;
  text-align: center;
  &.active {
    color: #00c3c3 !important;
    background-color: #030305 !important;
    position: relative;
    &::before {
      content: "";
      width: 5px;
      height: 60px;
      background-color: skyblue;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .van-cell__title {
    span {
      font-size: 18px !important;
      font-weight: 700 !important;
      line-height: 32px;
    }
  }
}
.myList {
  height: 100%;
  .one {
    overflow: hidden;
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .two {
    margin-top: 20px;
    height: 180px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /deep/::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background: #33333300;
    /**/
  }
  /deep/::-webkit-scrollbar-track {
    background: rgb(239, 239, 239, 0);
    border-radius: 2px;
  }
  /deep/::-webkit-scrollbar-thumb {
    background: rgba(192, 176, 33);
    border-radius: 10px;
  }
  /deep/::-webkit-scrollbar-thumb:hover {
    background: #33333300;
  }
  /deep/::-webkit-scrollbar-corner {
    background: #33333300;
  }
  /deep/::-webkit-scrollbar-track {
    background: #33333300;
  }
}
#new {
  .van-cell__title {
    // background-color: #1a1c25 !important;
    border-radius: 5px;
    span {
      font-size: 44px !important;
      padding: 5px;
      font-weight: 400 !important;
    }
  }
}
#new:hover {
  background-color: #fac018 !important;
}
.keyboard-mask {
  width: 78%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 20%;
  z-index: 4000;
}
.record{

/deep/.keyboard{
    margin: 0px;
    margin-right: 200px;
    padding: 0;
    list-style: none;
    user-select: none;
    background: #fff;
    box-shadow: 0 -3px 8px 5px #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 42px 0px;
    width: 810px;
    height: 150px;
    li{
      text-indent: 0;
        float: left;
        text-align: center;
        margin: 0 10px 10px 0;
        width: 70px;
        height: 25px;
        line-height: 25px;
        background: #fff;
        border-radius: 15px;
        font-size: 18px;
        font-weight: 500;
        box-shadow: 0 3px 6px 0px #cac9c9;
    }
    li:nth-child(n+11){
        margin-left: -2px!important;
    }
    li:nth-child(-n+27):nth-child(n+20){
        margin-left: 5px!important;
    }
    li:nth-child(38){
      width: 150px;
      text-indent: 2.5em;
    }
}
}
</style>
